<template>
  <view class="content">
    <template v-if="result === ''">
      <view class="title">
        短信验证
        <template v-if="smsType != 2"> 注册/登录 </template>
        <template v-else> 更换后手机号码 </template>
      </view>
      <view class="input_warp">
        <input
          :value="value"
          focus
          type="number"
          maxlength="11"
          confirm-type="done"
          @input="input"
        />
      </view>

      <button @click="validationPhone">获取短信验证码</button>
    </template>
    <template v-else>
      <view class="title"> 输入短信验证码 </view>
      <view class="toast"> 验证码已通过短信发送到 {{ value }} </view>
      <view class="message-warp">
        <u-message-input
          :maxlength="codeMaxlength"
          :value="smsCode"
          :focus="true"
          :breathe="true"
          :disabled-keyboard="true"
        >
        </u-message-input>
        <!-- @change="messageInputChange" @finish="messageInputFinish" -->
      </view>

      <u-keyboard
        ref="uKeyboard"
        mode="number"
        v-model="show"
        :dot-enabled="false"
        :mask="false"
        :mask-close-able="false"
        :safe-area-inset-bottom="true"
        :cancel-btn="false"
        :confirm-btn="false"
        :tooltip="false"
        @change="valChange"
        @backspace="backspace"
      >
        <!-- <template>
          <div class="keyboard-solt">请输入验证码</div>
        </template> -->
      </u-keyboard>
    </template>
  </view>
</template>

<script>
import { isPhone } from "@/utils/util";
import {
  checkPhone,
  doLoginByPhone,
  sendByType,
  doRegister,
  changePhone,
} from "@/api/user";
export default {
  data() {
    return {
      value: "",
      smsCode: "",
      smsType: "no", // 0,注册短信;1,验证码登录;2,更换手机号;
      show: true,
      phoneFlg: false,
      codeMaxlength: 6,
      result: "",
    };
  },
  onLoad(options) {
    console.log(options.smsType);
    this.smsType = options.smsType * 1;
  },
  watch: {
    smsCode: function (newVal) {
      if (newVal.length === this.codeMaxlength) {
        if (this.smsType === 0) {
          doRegister({
            phone: this.value,
            verificationCode: this.smsCode,
          }).then((res) => {
            this.$store.dispatch("user/setInfo", res);
            this.$ShowToast({
              content: "注册成功",
            });
            setTimeout(() => {
              this.$u.route({
                type: "back",
              });
            }, 1500);
          });
        } else if (this.smsType === 1) {
          doLoginByPhone({
            phone: this.value,
            verificationCode: this.smsCode,
          }).then((res) => {
            this.$store.dispatch("user/setInfo", res);
            this.$ShowToast({
              content: "登录成功",
            });
            setTimeout(() => {
              this.$u.route({
                type: "back",
              });
            }, 1500);
          });
        } else {
          // 修改手机号
          changePhone({
            phone: this.value,
            verificationCode: this.smsCode,
          }).then((res) => {
            this.$ShowToast({
              content: "修改成功，请重新登录！",
            });
            setTimeout(() => {
              this.$u.route("/pages/login/login");
            }, 1500);
          });
        }
      }
    },
  },
  methods: {
    input(e) {
      this.value = e.detail.value;
    },
    async validationPhone() {
      this.phoneFlg = isPhone(this.value);
      if (!this.phoneFlg) return;
      const res = await checkPhone({
        phone: this.value,
      });
      this.show = true;

      if (this.smsType == 2) {
      } else {
        this.smsType = res.result;
      }
      this.result = res.result;
      sendByType({
        phoneNumber: this.value.toString(),
        smsType: this.smsType,
      }).then(() => {
        this.$ShowToast({
          title: "验证码已通过短信发送",
        });
      });
    },
    // 按键被点击(点击退格键不会触发此事件)
    valChange(val) {
      this.smsCode += val;
    },
    // 退格键被点击
    backspace() {
      // 删除value的最后一个字符
      if (this.smsCode.length)
        this.smsCode = this.smsCode.substr(0, this.smsCode.length - 1);
    },
  },
};
</script>

<style lang="scss">
.content {
  padding: 190upx 80upx 0 80upx;
}

.message-warp {
  margin-top: 60upx;
  width: 100%;
}

.keyboard-solt {
  width: 100%;
  font-size: $font-size-small;
  padding: 20upx 0;
  text-align: center;
}

.title {
  margin-bottom: 30upx;
  height: 60upx;
  font-weight: 800;
  line-height: 60upx;
  color: $color-text-theme;
  font-size: $font-size-large-x;
}

.toast {
  height: 40upx;
  line-height: 40upx;
}

.iconfont {
  font-size: 30upx;
  color: $color-text-theme;
  position: absolute;
  left: 30upx;
}

.input_warp {
  width: 100%;
  height: 100upx;
  border-radius: 10upx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top128 {
  margin-top: 128upx;
}

.top90 {
  margin-top: 90upx;
}

.icon {
  width: 34upx;
  height: 34upx;
  background: #000000;
  position: absolute;
  top: 38upx;
  right: 100upx;
  font-size: 18upx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input_warp input {
  width: 100%;
  height: 100%;
  font-size: 32upx;
  font-weight: bold;
  padding: 0 30upx;
  background: #e8eaed;
}

button {
  width: 100%;
  height: 100upx;
  background: #001020;
  opacity: 1;
  border-radius: 10upx;
  margin-top: 30upx;
  color: #fff;
  font-size: 32upx;
  font-weight: bold;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

button[disabled] {
  background: #b8b8b8 !important;
  color: #fff !important;
}
</style>
